<template>
    <div id="welfareDel">
        <div class="nav"></div>
        <div class="nav1"><p><img src="../../assets/11111.jpg" alt=""></p></div>
        <div class="nav2"></div>

        <div id="word">
            <!--后退-->
            <div class="head">
                <p><img src="../../assets/task/back.png" alt="" onclick="history.go(-1)"></p>
                <div>
                    <p>{{form.welfareName}}</p>
                    <p>{{form.welfareDetailed}}</p>
                </div>
            </div>
            <p class="remain">剩余<span style="margin:0px 0.25rem;">{{form.creditDegree}}</span>份</p>
            <mt-navbar v-model="selected">
                <mt-tab-item id="1">详情</mt-tab-item>
                <mt-tab-item id="2">评价</mt-tab-item>
            </mt-navbar>

            <!-- tab-container -->
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                     <div>
                         <carousel-3d>
                            <slide :index="0">
                            <img :src="form.common1" alt="">
                            </slide>
                            <slide :index="1">
                            <img :src="form.common2" alt="">
                            </slide>
                            <slide :index="2">
                            <img :src="form.common3" alt="">
                            </slide>
                            </slide>
                        </carousel-3d>   
                     </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2" style="margin-top:0.5rem">
                    <mt-loadmore ref="loadmore" :top-method="loadTop" @top-status-change="handleTopChange" v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0" infinite-scroll-immediate-check="false" style="height:30rem;overflow:scroll;padding-bottom:2.5rem;">
                       <section class="comment" v-for="item in commentData">
                            <section>
                                <router-link to="/userCom"><img class="userCom" :src="item.userModel.headPortrait" alt="">
                                </router-link>
                                <section>
                                    <p>{{item.userModel.nickName}}</p>
                                </section>
                                <p class="issue">{{turnTime(item.createTime)}} 发表</p>
                            </section>
                            <p class="reviewComments">{{item.evaluationContent}}</p> 
                       </section>
                       <div slot="top" class="mint-loadmore-top">
                            <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                            <span v-show="topStatus === 'loading'">Loading...</span>
                       </div>
                        <!--底部判断是加载图标还是提示“全部加载”-->
                        <li class="more_loading" v-show="!queryLoading">
                            <mt-spinner type="fading-circle" color="#2AA094" :size="20" v-show="moreLoading&&!allLoaded"></mt-spinner>
                            <span v-show="allLoaded">已全部加载</span>
                        </li>
                    </mt-loadmore>
                </mt-tab-container-item>
            </mt-tab-container>

             <P class="exchange" @click="showDiv">立即兑换</P>
            <!--兑换弹出框-->
            <div id="excWindow" style="display: none;">  
            </div> 
            <div id="excLayer" style="display: none;">
                <div class="exc">
                    <img class="excImg" :src="form.cover" alt="">
                    <section>
                        <p style="font-size:0.8rem;">{{form.welfareName}}</p>
                        <p style="font-size:0.7rem;color:#8a8a8a;">每人限兑{{form.limitations}}份</p>
                        <div class="format">
                            <p  v-for="(item,index) in format" v-bind:class="{active:isActive==index}" @click="formatSel(index,item.id,item.specPrice,item.specName)">{{item.specPrice}}</p>
                        </div>
                    </section>
                    <img  class="excClose" @click="closeDiv()" src="../../assets/task/chanel.png" alt="">
                </div>
                <div class="number">数量：
                    <el-input-number v-model="forms.num" @change="handleChange" :min="1" :max="form.limitations" label="描述文字"></el-input-number>
                </div>
                <div class="sureExchange" @click="sendFormat">确定兑换</div></router-link>
            </div>
        </div>
    </div>
</template>
<script>
import turnTime from '../../server/dataTime.js'
import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
  data () {
    return {
        topStatus: '',
        //初始化无限加载相关参数
        queryLoading: false,
        moreLoading: false,
        allLoaded: false,
        turnTime:turnTime,
        commentData:[],
        selected:"1",
        isActive:'1',
        form:{
        },
        formatID:"",
        formatName:"",
        formatPrice:"",
        specPrice:"",
        specName:"",
        num:1,
        format:[],
        forms:{
            pageSize: 4,
            pageNumber: 1,
        },
        welfareFor:{

        },
    }
  },
  created(){
      this.getData();
      this.getEvalComById()
  },
  components: {
    Carousel3d,
    Slide
  },
  methods:{
       loadTop(){
                this.$refs.loadmore.onTopLoaded();
                this.commentData = [];
                 this.forms.pageNumber = 1;
                this.getEvalComById();
            },
            handleTopChange(status) {
                this.topStatus = status;
            },
            //无限加载函数
            loadMore() {
               if(this.allLoaded){
                this.moreLoading = true;
                return;
                }
                if(this.queryLoading){
                return;
                }
                this.moreLoading = !this.queryLoading;
                this.forms.pageNumber = Number(this.forms.pageNumber)+1
                setTimeout(() => {
                    this.getEvalComById()
                    this.moreLoading = this.allLoaded;
                }, 100);
            },
            
      // 根据id查看福利的评论
      getEvalComById(){
          this.$api.getEvalComById(this.$route.params.id,this.forms).then(res=>{
                 if(res.code=='000000'){
                     res.data.list.forEach((item)=>{
                         this.commentData.push(item)
                     })
                    console.log(this.commentData)
                }
           })
      },
         showDiv(){  
            document.getElementById('excWindow').style.display = 'block';  
            document.getElementById('excLayer').style.display = 'block';        
        },
        closeDiv() {  
            document.getElementById('excWindow').style.display = 'none';  
            document.getElementById('excLayer').style.display = 'none';  
        },
        formatSel(index,id,specPrice,specName){
            this.isActive=index;
            this.formatID=id;
            this.specPrice=specPrice;
            this.specName=specName;
            console.log('id')
            console.log(id)
        },
        getData(){
           this.$api.getWelfare(this.$route.params.id).then(res=>{
                 if(res.code=='000000'){
                    this.form=res.data;
                    this.format=this.form.specModelList;
                }
           })
        },
        sendFormat(){
            this.forms.specId=this.formatID;
            this.forms.exchangeNum=this.num;
            this.forms.id=this.$route.params.id;
            this.welfareFor=this.form;
            this.welfareFor.specPrice=this.specPrice;
            this.welfareFor.specName=this.specName;
            this.$router.push({
            path: '/rollConfim',
            name: 'rollConfim', 
            query: {
                name: 'rollConfim',
                data1:this.forms,
                data2:this.welfareFor,
                }
            })
        },
        
        handleChange(value) {

        },
  }
}
</script>
<style>
#welfareDel{
    height:100%;
    width:100%;
}
.carousel-3d-container[data-v-c06c963c] {
    min-height: 16rem;
    width: 100%;
    position: relative;
    z-index: 0;
    width:100vw !important;
    height:20rem !important;
    overflow: hidden;
    margin: 1rem auto;
    box-sizing: border-box;
}
.carousel-3d-slider[data-v-c06c963c] {
    width:20rem !important;
    height:20rem !important;
    position: relative;
    margin: 0 auto;
    border-width: 0px !important;
    transform-style: preserve-3d;
    -webkit-perspective: 50rem;
    -moz-perspective: 50rem;
    perspective: 50rem;
}
.carousel-3d-slider[data-v-c06c963c] .carousel-3d-slide current[data-v-c06c963c]{
    width:20rem !important;
    height:20rem !important;
    opacity: 1!important;
    border-width: 0px !important;
    visibility: visible!important;
    transform: none!important;
    box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #888888 !important;
    z-index: 999;
}
.carousel-3d-slider[data-v-c06c963c] .carousel-3d-slide[data-v-c06c963c]{
    width:20rem !important;
    height:20rem !important;
    opacity: 1!important;
    z-index: 999;
    border-width: 0px !important;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #888888 !important;
    transition: transform 500ms, opacity 500ms, visibility 500ms; 
    transform: translateX(-12rem) translateZ(-20rem) rotateY(35deg); 
    top: 0px; 
    opacity: 1; 
    visibility: visible;
}
.carousel-3d-slider[data-v-c06c963c] .carousel-3d-slide[data-v-c06c963c] img{
    width:20rem;
    height:20rem;

}
#welfareDel .mint-navbar{
    background-size:100% 100%;
    background-image:url(../../assets/welfare/tab.png);
}
#welfareDel .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 0px solid #26a2ff;
    color: #29a193;
    margin-bottom: -0.15rem;
}
#welfareDel .mint-navbar .mint-tab-item{
    text-decoration:none;
    color:#8a8a8a;
}
#welfareDel .mint-tab-item-label{
    font-size:0.9rem;
    height:1rem;
    line-height:1rem;
}
#welfareDel .mint-tab-container-item:nth-child(1){
    width:100%;
    height:50%;
}
#welfareDel .mint-tab-container-item:nth-child(2){
    width:100%;
    height:20rem;
    overflow:scroll;
}
#welfareDel .mint-tab-container-item:nth-child(2) .comment{
    width:93.3%;
    height:6.5rem;
    color:#8a8a8a;
    padding:0.75rem;
    background:#FFF;
    margin:0.25rem auto;
    box-shadow:0px 0.15rem 0px #e2e2e2;
}
#welfareDel .mint-tab-container-item:nth-child(2) .comment > section{
    width:100%;
    font-size:0.8rem;
    display:flex;
    justify-content:space-between;
}
#welfareDel .mint-tab-container-item:nth-child(2) .comment > section .issue{
    font-size:0.8rem;
    line-height:3rem;
}
#welfareDel .mint-tab-container-item:nth-child(2) .comment > section > section{
    width:8rem;
}
#welfareDel .mint-tab-container-item:nth-child(2) .comment .reviewComments{
    height:2.8rem;
    font-size:0.8rem;
    width:68%;
    margin:auto;
}
#welfareDel .mint-tab-container-item:nth-child(2) .comment > section .userCom
{
    height:3rem;
    width:3rem;
    border-radius:50%
}
#welfareDel .nav{
    height:8.5rem;
    width:100%;
    background:#2f9a90;
    position:absolute;
    z-index:1;
    filter: blur(0.41500000000000004rem);
}
#welfareDel .nav1{
    height:8.5rem;
    width:100%;
    overflow:hidden;
    position:absolute;
    z-index:2;
    filter: blur(0.41500000000000004rem);
}
#welfareDel .nav1 > p{
    margin-top:-5rem;
}
#welfareDel .nav1 > p img{
    border-radius:50%;
    height:18rem;
    width:18rem;
}
#welfareDel .nav2{
    border-bottom:1px solid #ffffff;
    height:9rem;
    width:100%;
    background:rgba(225,225,255,0.83);
    position:absolute;z-index:3;
}
#welfareDel #word{
    position:absolute;
    z-index:4;
    width:100%;
    height:100%;
}
#welfareDel #word .head{
    display:flex;
    height:6.5rem;
}
#welfareDel #word .head > p > img{
    height:1rem;
    width:0.6rem;
    margin:1rem 0.6rem 0px 1rem;
}
#welfareDel #word .head > div {
    margin:2rem 0px 0px 1.5rem;
    color:#29a193;
}
#welfareDel #word .head > div p:nth-child(1){
    font-size:1rem;
    margin-bottom:0.75rem;
}
#welfareDel #word .head > div p:nth-child(2){
    font-size:0.9rem;
}
#welfareDel #word .remain{
    width:90%;
    height:2.5rem;
    text-align:right;
    color:#8a8a8a;
}
#welfareDel #word .exchange{
    width:90%;
    text-align:center;
    color:#fff;
    height:2.5rem;
    line-height:2.5rem;
    margin:1.4rem auto;
    background:#29a193;
    border-radius:13px;
}
#welfareDel #excWindow{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    position: absolute;       
}  
#welfareDel #excLayer{   
    width:90%;
    height:15.5rem;
    background:#ffffff;  
    left: 5%;  
    top: 49%;
    color:#000;  
    z-index: 2;  
    border-radius:13px;
    position: absolute;  
}
#welfareDel #excLayer  .exc {
    display:flex;
    justify-content:space-between;
}
#welfareDel #excLayer  .excImg{
    height:7.5rem;
    width:7.5rem;
    margin:1.2rem 1.25rem;
}
#welfareDel #excLayer  .excClose{
    width:1.5rem;
    height:1.5rem;
    margin-top:0.75rem;
    margin-right:1rem;
}
#welfareDel #excLayer  .exc > section{
    width:40%;
    margin-top:1.5rem;
    line-height:1.25rem;
}
#welfareDel #excLayer  .exc > section .format{
    height:1.5rem;
    line-height:2rem;
    font-size:0.8rem;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
#welfareDel #excLayer  .exc > section .format > p{
    background:red;
    width:40%;
    color:#8a8a8a;
    text-align:center;
    background:#f8f8f8;
    border-radius:5px;
    margin:0.25rem 0px;
}
#welfareDel #excLayer  .exc > section .format .active{
    background:#1ca591;
    color:#fff;
}
#welfareDel .number{
    height:2.5rem;
    line-height:2.5rem;
    text-align:right;
    width:90%;
    margin-bottom:0.5rem;
    font-size:0.9rem;
    color:#29a193;
}
#welfareDel .sureExchange{
    height:2.75rem;
    line-height:2.75rem;
    background:#29a193;
    text-align:center;
    font-size:0.8rem;
    border-bottom-left-radius:0.65rem;
    border-bottom-right-radius:0.65rem;
    color:#fff;
}

</style>